<!--
 * Description: rd-gcm映射修改页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/05/28 13:05
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="120px" :model="formData" size="mini">
      <el-row>
        <!--RD Function--->
        <el-col :span="24">
          <el-form-item :label="$t('RdGcmMap.rdFunction')">
            <el-input v-model="formData.rdFunction" clearable disabled />
          </el-form-item>
        </el-col>

        <!--Category-->
        <el-col :span="24">
          <el-form-item :label="$t('RdGcmMap.category')">
            <el-select
              v-model="formData.category"
              clearable
              disabled
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['category/getCategoryCollects']"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--GCM Function-->
        <el-col :span="24">
          <el-form-item :label="$t('RdGcmMap.gcmFunction')">
            <el-select
              v-model="formData.gcmFunction"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['enums/getGcmFunctionListOnly']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">{{ $t('button.save') }}</el-button>
    </span>
  </div>
</template>

<script>
import { rdGcmEdit } from '@/api/quote/rd-gcm'
export default {
  name: 'RdGcmMapEdit',
  props: {
    inputData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {}
    }
  },
  watch: {},
  created() {
    this.pageDataInit()
  },
  methods: {
    pageDataInit() {
      // 将props传入的值复制给formData的值
      this.formData = JSON.parse(JSON.stringify(this.inputData))
    },
    async save() {
      try {
        await rdGcmEdit(
          {
            category: this.formData.category,
            gcmFunction: this.formData.gcmFunction,
            rdFunction: this.formData.rdFunction
          },
          { msgSuccess: true, msgError: true }
        )
        this.$emit('save')
      } catch (error) {
        console.log(error)
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style></style>
